<template>
  <div class="sign-in-edit" v-loading="pageLoading">
    <el-form :model="formData" size="medium" ref="form" label-width="100px">
      <el-form-item label="活动名称:" prop="name" :rules="commonRules.notNullRule">
        <el-input v-model="formData.name" placeholder="活动名称,最多15个字" maxLength="15"></el-input>
      </el-form-item>
      <el-form-item label="活动规则:" prop="ruleDescription" :rules="commonRules.notNullRule">
        <el-input type="textarea" v-model="formData.ruleDescription" :rows="4" placeholder="活动规则,最多500个字" maxLength="500"></el-input>
        <span class="tip" style="color:red;font-size:12px;">请在需要换行的句尾加 # 号以表示换行</span>
      </el-form-item>
      <el-form-item label="H5页面链接:" prop="h5Link">
        <el-input type="textarea" v-model="formData.h5Link" :rows="2" placeholder="H5页面链接地址" maxLength="500"></el-input>
      </el-form-item>
      <el-form-item label="分享海报:" prop="shareImageUrl" :rules="commonRules.notNullRule">
        <ul class="upload-img-list">
          <draggable v-model="formData.shareImageUrl" :options="{group:'shareImageUrl'}" @start="drag=true" @end="drag=false">
            <li class="img-preview" v-for="(item, index) of formData.shareImageUrl" :key="index">
              <img :src="item.url" alt="">
              <div class="img-preview-mask">
                <div class="mask-btn">
                  <i title="删除" class="el-icon-delete" @click="delImg(index)"></i>
                </div>
              </div>
            </li>
          </draggable>
          <li v-if="formData.shareImageUrl.length < 5">
            <label class="upload-btn">
              <input type="file" @change="uploadImg"/>
              <i class="el-icon-plus"></i>
            </label>
          </li>
        </ul>
        <div v-if="formData.shareImageUrl.length>1" style="color: red;line-height: 1">拖拽已上传的图片可以进行排序</div>
      </el-form-item>
      <el-form-item label="分享封面:" prop="sharePoster">
        <el-upload
          class="avatar-uploader"
          :action="upladUrl"
          name="file"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="uploadSuccess">
          <img v-if="formData.sharePoster" :src="formData.sharePoster" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div style="color: #1ea0ff; margin-top: -15px; margin-left: 25px;cursor: pointer" @click="formData.sharePoster = ''">移除</div>
      </el-form-item>
      <el-form-item label="分享标题:" prop="shareTitle" :rules="commonRules.notNullRule">
        <el-input v-model="formData.shareTitle" placeholder="微信分享给好友时会显示，建议36字以内" maxLength="36"></el-input>
        <span class="tip">此文案用于分享到朋友圈、微信群、微信好友</span>
      </el-form-item>
      <el-form-item label="分享描述:" prop="shareDescription">
        <el-input type="textarea" v-model="formData.shareDescription" :rows="3" placeholder="来签个到吧！" maxLength="50"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn-container">
      <el-button type="primary" :loading="btnLoading" plain @click="save">保 存</el-button>
    </div>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import Sortable  from 'sortablejs'
export default {
  name: 'sign-in-edit',
  props: {
    activityId: { default: '' }
  },
  components: {
    draggable,
    Sortable,
  },
  data(){
    return {
      pageLoading: false,
      btnLoading: false,
      formData: {
        id: this.activityId,
        name: '',
        ruleDescription: '',
        h5Link: '',
        shareImageUrl: [],
        sharePoster: '',
        shareTitle: '',
        shareDescription: '',
        rules: []
      }
    }
  },
  methods: {
    fetchData(){
      this.pageLoading = true
      this.request({
        url: "/sign-in/signIn/detail",
        method: "post",
        data: { id: this.activityId }
      }).then(({ data }) => {
          let shareImageUrl = []
          try {
            shareImageUrl = JSON.parse(data.shareImageUrl||'[]')
          } catch (e) {
            // console.log(e)
          }
          this.formData = {
            ...data,
            shareImageUrl,
            sharePoster: data.sharePoster || ''
          };
          this.$refs.form.clearValidate()
          this.pageLoading = false
        })
        .catch(err => {
          console.log(err);
          this.pageLoading = false
        });
    },
    uploadSuccess(res) {
      this.formData.sharePoster = this.replaceImgUrl(res.filePath);
    },
    uploadImg(event) {
      const file = event.target.files[0];
      this.picFileUpload(file, (res, file, type) => {
        this.formData.shareImageUrl.push({
          url: this.replaceImgUrl(res.filePath),
          type: type
        });
      })
    },
    delImg(index) {
      this.formData.shareImageUrl.splice(index, 1);
    },
    save(){
      this.$refs.form.validate(valid => {
        if(!valid)
          return

        this.btnLoading = true
        this.request({
          url: "/sign-in/signIn/save",
          method: "post",
          data: {
            ...this.formData,
            shareImageUrl: JSON.stringify(this.formData.shareImageUrl),
          }
        }).then(() => {
          this.$message.success('保存成功')
          // this.fetchData()
          this.btnLoading = false
        })
        .catch(err => {
          console.log(err);
          this.btnLoading = false
        });
      })
    }
  }
}
</script>
<style lang="scss">
@import "../../../styles/_mixin.scss";

.sign-in-edit{
  .form-static{
    span{
      color: #999;  
    }
  }

  .avatar-uploader .el-upload,
  .upload-img-list li,
  .upload-img-list .upload-btn{
    width: 80px;
    height: 80px;
    line-height: 78px;
  }
  .upload-img-list .img-preview .img-preview-mask .mask-btn {
    margin-top: 22px;
    line-height: 36px;
    text-align: center;
  }

  .signInReward{
    max-width: 560px;
  }

  textarea{
    height: auto !important;
  }
  .btn-container{
    text-align: center;
  }
  .tip{
    color: #555555;
    font-size: 12px;
    margin-left: 15px;
  }
}
</style>
